﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户添加 - 网上书城</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #ecf0f1;
            --accent-color: #e74c3c;
            --text-color: #34495e;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: #f8f9fa;
        }

        /* 页眉样式 */
        #header {
            background: var(--primary-color);
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        #logotxt {
            color: white;
            font-size: 1.8rem;
            font-weight: 600;
        }


        .container {
            width: 95%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* 主要内容 */
        #content {
            padding: 0.5rem;
            width: 80%;
            margin: 0 auto;
        }

        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .dashboard-title {
            color: var(--primary-color);
            font-size: 1.8rem;
        }

        /* 表单样式 */
        .form-horizontal {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .form-group {
            margin-bottom: 0.5rem;
        }

            .form-group p {
                font-weight: 600;
                color: var(--text-color);
            }

        .form-control {
            width: 100%;
            padding:0.5rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
        }

        .text-danger {
            color: var(--accent-color);
            font-size: 0.8rem;
        }

        .btn {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

            .btn-primary:hover {
                background: var(--secondary-color);
            }

        /* 页脚 */
        #footer {
            background: var(--primary-color);
            color: white;
            text-align: center;
            padding: 1.5rem;
            margin-top: 3rem;
        }
    </style>
</head>
<body>
    <div id="all">
        <!-- 页眉 -->
        <div id="header">
            <div id="logo"><span id="logotxt">网上书城</span></div>
            <div id="loginmsg">
                @Html.ActionLink("退出", "Index", "ShopInfo", null, new { @class = "btn", style = "background: var(--accent-color); color: white;" })
            </div>
        </div>

        <div id="content">
            <div class="dashboard-header">
                <h2 class="dashboard-title">客户添加</h2>
            </div>
            <form method="post">
                <div class="form-horizontal">
                    <hr />
                    <div class="form-group">
                        <p>账号</p>
                        <div>
                            <input type="text" name="ShopLogin" class="form-control" />
                        </div>
                    </div>

                    <div class="form-group">
                        <p>姓名</p>
                        <div>
                            <input type="text" name="ShopName" class="form-control" />
                        </div>
                    </div>

                    <div class="form-group">
                        <p>电话</p>
                        <div>
                            <input type="text" name="ShopPhone" class="form-control" />
                        </div>
                    </div>

                    <div class="form-group">
                        <p>地址</p>
                        <div>
                            <input id="sel1" name="ShopRegio" type="text" class="form-control city_input" readonly="readonly" />
                        </div>
                    </div>

                    <div class="form-group">
                        <p>详细地址</p>
                        <div>
                            <input type="text" name="ShopAddress" class="form-control" />
                        </div>
                    </div>

                    <div class="form-group">
                        <p>备注</p>
                        <div>
                            <input type="text" name="ShopRemark" class="form-control" />
                        </div>
                    </div>

                    <div class="form-group">
                        <p>密码</p>
                        <div>
                            <input type="password" name="ShopPassword" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <table>
                            <tr>
                                <td>
                                    <div>
                                        <input type="submit" value="添加" class="btn btn-primary" />
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        @Html.ActionLink("返回", "GetShopList", "ShopInfo", null, new { @class = "btn btn-primary", style = "background: var(--secondary-color); color: black;" })
                                    </div>
                                </td>
                            </tr>
                        </table>

                    </div>

                </div>
            </form>
            
            
        </div>

        <!-- 页脚 -->
        <div id="footer">
            <p>网上书城 --- MVC</p>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>